<template>
  <view>
    <BaseNavbar title="设备领取" />
    <view class="bindHotelCard">
      <view class="deviceCode">
        <view>设备编号</view>
        <view>{{ device_sn ? device_sn : "" }}</view>
      </view>
      <view class="hotelName">
        <view>领取状态</view>
        <view>{{ isActive ? "已领取" : "等待领取" }}</view>
      </view>
    </view>
    <view class="bind-btn">
      <BaseButton @onClick="activeMachine">领 取</BaseButton>
    </view>
  </view>
</template>

<script>
import BaseButton from "../../components/base/BaseButton.vue";
import BaseNavbar from "../../components/base/BaseNavbar.vue";
export default {
  components: { BaseNavbar, BaseButton },
  data() {
    return {
      fromData: "", //来源
      isFromIndexScan: false, //首页扫码来的
      mid: "",
      isActive: false,
      device_sn: "",
    };
  },
  methods: {
    async getActive() {
      let data = {
        mid: this.mid,
      };
      let rtn = await this.$u.api.isActive(data);
      this.isActive = rtn?.is_active;
      this.device_sn = rtn?.device_sn;
    },
    activeMachine() {
      //领取设备
      let data = {
        device_sn: this.device_sn,
      };

      this.$u.api.activeMachine(data).then((res) => {
        this.isShowSuccess("领取成功", 0, this.getActive());
      });
    },
  },
  onLoad(opt) {
    if (opt?.from) {
      this.fromData = opt.from;
      this.isFromIndexScan = true;
    }
    this.mid = opt?.mid;
    this.getActive();
  },
};
</script>

<style lang="scss" scoped>
.bindHotelCard {
  margin-top: 20rpx;
  height: 200rpx;
  width: 100%;
  background: white;
  font-size: 26rpx;
  color: $textBlack;
  .deviceCode,
  .hotelName {
    height: 100rpx;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    margin-left: 35rpx;
    border-bottom: 1rpx solid #e5e5e5;
  }
  .deviceCode view:first-child,
  .hotelName view:first-child {
    margin-right: 30rpx;
  }
}
.bind-btn {
  padding: 0 50rpx;
  margin-top: 100rpx;
}
</style>